<template>
	<view class="container">
		<carHeader>
			<slot>
				<uni-nav-bar :border="false" background-color="rgba(255,255,255,0.0)"></uni-nav-bar>
			</slot>
		</carHeader>
		<view class="title">
			<view class="title1">
				你好，
			</view>
			<view class="title2">
				欢迎登录车联网服务
			</view>
		</view>
		<image class="car" src="../../static/车联网服务-00登录-01获取位置_slices/组 6.png" mode="widthFix"></image>
		<view class="main">
			<form>
				<view class="line">
					<input type="text" v-model="form.phoneNumber" placeholder="手机号" />
				</view>
				<view class="line">
					<input type="text" v-model="form.code" placeholder="验证码" />
					<!-- <u-toast ref="uToast"></u-toast> -->
					<view class="codeBtn">
						<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-code>
					</view>
					<u-button @tap="getCode" color="#5A89EC" style="width: 220rpx; height: 80%;">{{tips}}</u-button>
				</view>
				<!-- <view class="register" @click="toRegister">立即注册></view> -->
				<view class="button">
					<button type="primary" @click="toLogin">登录</button>
				</view>
			</form>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				seconds: 60,
				tips: null,
				form: {
					phoneNumber: null,
					code: null
				},
			};
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				console.log("发送验证码");
				if (this.$refs.uCode.canGetCode) {
					console.log(this.form.phoneNumber);
					if(this.form.phoneNumber==null){
						uni.showToast({
							title: "手机号不能为空"
						})
					}else{
					// 模拟向后端请求验证码
					uni.showLoading({
							title: '正在获取验证码',
						}),
						uni.request({
							url: "http://localhost:8080/carUser/userSms",
							method:"GET",
							data:{
								phoneNumber:this.form.phoneNumber
							},
							success() {
							console.log("验证码获取成功");	
							},
							fail() {
								console.log("验证码获取失败");
							}
						}),
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
					}
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				uni.$u.toast('倒计时结束');
			},
			start() {
				uni.$u.toast('倒计时开始');
			},
	
			// 登录
			toLogin() {
				// console.log(this.form);
				if (this.form.phoneNumber == null) {
					uni.showToast({
						title: "手机号不能为空"
					})
				}
				// console.log(this.form);
				let mobile = this.form.phoneNumber;
				let code1 = this.form.code;
				console.log(mobile);
				console.log(code1);
				uni.request({
					url: "http://localhost:8080/carUser/userLogin",
					method: "GET",
					data: {
						phoneNumber: mobile,
						code: code1
					},
					success: (res) => {
						console.log(res)
						console.log(res.data);
						if(uni.getStorage('token')!=null){
							uni.clearStorage('token');
						}
						if(res.data.code==500){
							uni.showToast({
								title:"该用户不存在"
							})
						}else  if (res.data.code == 200) { 
								console.log(res.data.data.token);
								let token =res.data.data.token; //成功
								//token储存在缓存区里
								uni.setStorage({
									key: 'token',
									data: token,
									success: function() {
										console.log('存储token success');
										//跳转到首页
										//redirectTo 不支持 navigateBack返回
										uni.redirectTo({ 
											url:"/pages/index/index"
										})									
									}
								});
							} else {
								console.log(res.data.msg + "登录失败")
							}		
					},
					fail:function(){
						console.log("登录失败");
						uni.showToast({
							title:"手机号与验证码不匹配"
						})
					}
				})
	
			}
		}
	}
</script>

<style lang="scss">
	.bg {
		width: 100%;
	}
	
	.car {
		width: 280rpx;
		position: relative;
		top: -200rpx;
		left: 440rpx;
		z-index: 2;
	}
	
	.main {
		background-color: #fff;
		height: 1000rpx;
		position: relative;
		top: -300rpx;
		border-radius: 50rpx;
		z-index: 1;
		padding: 100rpx;
	}
	
	.title {
		height: 100rpx;
		// background-color: #fff;
		position: absolute;
		top: 100rpx;
		left: 100rpx;
		color: white;
		font-weight: 700;
	
		.title1 {
			font-size: 48rpx;
			height: 80rpx;
		}
	
		.title2 {
			font-size: 40rpx;
	
		}
	}
	
	.line {
		border-bottom: 1px solid gray;
		height: 80rpx;
		width: 100%;
		margin: 10rpx auto;
		display: flex;
		align-items: center;
	
	
		input {
			height: 80rpx;
			line-height: 80rpx;
		}
	}
	
	.register {
		margin: 40rpx 0;
		color: #007AFF;
	}
</style>